<template>
  <view class="chat-item" @click="itemClick">
    <view class="page-container">
      <view class="content">
        <view class="avatar">
          <image src="@/static/image/common/test.png" mode="aspectFill" />
          <view class="tips" v-show="showTips"></view>
        </view>

        <view class="title flex flex-middle flex-between">
          {{ title }}
          <text v-if="showDate"> 03-19 </text>
        </view>

        <view class="content-text text-line">
          {{ content }}
        </view>
      </view>
    </view>
  </view>
</template>
  
<script>
export default {
  props: {
    title: {
      type: String,
      default: "",
    },
    content: {
      type: String,
      default: "",
    },
    avatar: {
      type: String,
      default: "",
    },
    showTips: {
      type: Boolean,
      default: false,
    },
    showDate: {
      type: Boolean,
      default: true,
    },
    follow: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    itemClick(item) {
      if (this.follow) return this.$navigateTo("/pages/follow/index");
    },
  },
};
</script>
  
<style scoped lang="scss">
.chat-item {
  border-bottom: 1px solid #efefef;

  .content {
    padding: 16px 22px;
    height: 100%;
    overflow: hidden;

    &-text {
      font-size: 12px;
      color: #7d7d7d;
      margin-top: 4px;
    }

    .title {
      color: #212121;
      font-size: 16px;
      margin-top: 6px;

      text {
        color: #aeaeae;
        font-size: 12px;
      }
    }

    .avatar {
      float: left;
      position: relative;
      margin-right: 12px;

      image {
        width: 56px;
        height: 56px;
        border-radius: 50%;
      }

      .tips {
        position: absolute;
        top: 4px;
        right: 2px;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #ff4141;
      }
    }
  }
}
</style>
  